<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<title>摩鱼MOYU</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css" />
		<link rel="stylesheet" type="text/css" href="css/mui.poppicker.css" />
		<link rel="stylesheet" type="text/css" href="css/feedback.css" />
	</head>
	<style type="text/css">
		html,
		body {
			overflow: hidden;
		}
		.mui-table-view-cell{
			padding: 10px 15px;
		}
		
		.mui-btn-primary {
			padding: 6px 5px;
			margin-bottom: 0;
		}
		
		.mui-control-content {
			position: initial;
		}
		
		.mui-scroll-wrapper {
			top: 6px;
			bottom: 60px;
		}
		
		.mui-table-view-cell>a:not(.mui-btn).mui-active,
		.mui-table-view-cell>a:not(.mui-btn).mui-active>*,
		.mui-table-view-cell>a:not(.mui-btn).mui-active select {
			background: #eee;
		}
		
		.mui-input-group:before,
		.mui-input-group:after,
		.mui-input-group .mui-input-row:after {
			height: 0;
		}
		
		.mui-input-row button.timeBtn {
			width: inherit;
			border: 0;
			font-size: 12px;
			padding: 0;
			width: 100%;
			height: 40px;
			margin: 0;
			position: absolute;
			top: 0;
			opacity: 0;
		}
		
		textarea {
			margin: 0;
			padding-bottom: 0;
			border: 0;
		}
		
		#result,
		select {
			color: #666
		}
		
		.mui-segmented-control {
			border-radius: 0;
			border: 0;
		}
		
		.mui-segmented-control .mui-control-item.mui-active {
			background-color: #21b8d7;
			color: #fff;
		}
		
		.mui-btn-primary {
			background-color: #21B8D7;
			border: 1px solid #21B8D7;
		}
		
		.mui-segmented-control .mui-control-item {
			color: #21B8D7;
			border-color: #21B8D7;
		}
		
		.mui-table-view-cell.mui-active {
			background: #fff;
		}
		
		.mui-table-view-cell.mui-collapse.mui-active>.mui-navigate-right:after,
		.mui-table-view-cell.mui-collapse.mui-active>.mui-push-right:after {
			content: '\e581';
		}
		
		.fixSucess {
			position: absolute;
			bottom: 0;
			left: 0px;
			right: 0px;
			/*margin: 0;*/
		}
		
		.result,
		#cityResult {
			float: right;
			width: 65%;
			margin-bottom: 0;
			padding: 11px 15px;
			padding-left: 0;
			border: 0;
		}
		
		#tab {
			display: none;
		}
		.twoBtn{
			width: 45%;
			float: left;
			border: 0;
			margin: 0 2%;
			line-height: 32px;
			border-radius: 6px;
		}
		.orderBtn{
			border: 1px solid #d1d1d1;
		}
		.mui-btn-primary{
			background-color: #3090fc;
		}
	</style>

	<body>
		<div class="mui-content">

		</div>

		<div class="mui-content">
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<!--这里放置真实显示的DOM内容-->
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-collapse">
							<a class="mui-navigate-right">
								<form id="pid" class="mui-input-group">
									<div class="mui-input-row">
										<label>售后类型</label>
										<select class="afterSales" onchange="btnChange(this[selectedIndex].value);">
											<option value="0">请选择</option>
											<option value="1">安装</option>
											<option value="2">报修</option>
										</select>
									</div>
								</form>
							</a>
						</li>
						<li class="mui-table-view-cell mui-collapse">
							<a class="mui-navigate-right">
								<form class="mui-input-group">
									<div class="mui-input-row">
										<label>购买渠道</label>
										<select name="">
											<option value="">请选择</option>
											<option value="">京东</option>
											<option value="">天猫</option>
											<option value="">淘宝</option>
											<option value="">苏宁</option>
										</select>
									</div>
								</form>
							</a>
						</li>

						<li class="mui-table-view-cell">
							<a>
								<form class="mui-input-group">
									<div class="mui-input-row">
										<label>订单号</label>
										<input type="text" class="mui-input-clear" placeholder="请输入订单号">
									</div>
								</form>
							</a>
						</li>
						<li class="mui-table-view-cell mui-collapse" id="tab">
							<a class="mui-navigate-right">
								<form class="mui-input-group">
									<div class="mui-input-row">
										<label>故障类型</label>
										<select name="">
											<option value="">请选择故障类型</option>
											<option value="">无法连接APP(智能版)</option>
											<option value="">脱水声音大</option>
											<option value="">洗衣机漏水</option>
											<option value="">按键失灵</option>
											<option value="">功能故障</option>
											<option value="">其他</option>
										</select>
									</div>
								</form>

							</a>
							<!--<a>
										<div class="mui-input-row">
											<textarea id="textarea" rows="5" placeholder="故障描述……"></textarea>
										</div>
									</a>-->

						</li>
						<li class="mui-table-view-cell">
							<a>
								<form class="mui-input-group">
									<div id='timeBtn' data-options='{"type":"date"}' class="btn mui-input-row">
										<label>预约时间</label>
										<p class="result mui-input-clear">请选择日期</p>

									</div>
								</form>
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a>
								<form class="mui-input-group">
									<div class="mui-input-row">
										<label>联系人</label>
										<input type="text" class="mui-input-clear" placeholder="请输入联系人姓名">
									</div>
								</form>
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a>
								<form class="mui-input-group">
									<div class="mui-input-row">
										<label>联系电话</label>
										<input type="text" class="mui-input-clear" placeholder="请输入联系人电话">
									</div>
								</form>
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a>
								<form class="mui-input-group">
									<div id="showCityPicker3" class="mui-input-row">
										<label>售后地址</label>
										<p id="cityResult" class=" mui-input-clear">选择安装地址</p>
									</div>
								</form>
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a>
								<form class="mui-input-group">
									<div class="mui-input-row">
										<label>详细地址</label>
										<input type="text" class="mui-input-clear" placeholder="请输入详细地址">
									</div>
								</form>
							</a>
						</li>
					</ul>

					<!--<ul class="mui-table-view">
						<li class="mui-table-view-cell">

							<form class="mui-input-group">
								<div class="mui-input-row">
									<label style="color: #333;">安装条件</label>
									<div class="mui-pull-right">
										<a><span class="mui-icon mui-icon-image" style="font-size: 36px;color: #999;"></span></a>
									</div>

								</div>
							</form>

						</li>
					</ul>
					<p style="padding: 10px 15px 0;">请拍摄水龙头照片及放置洗衣机位置区域现场图</p>
					<div></div>-->
				</div>
			</div>
			<div class="mui-content-padded fixSucess">
				<button type="button" class="mui-btn twoBtn orderBtn">进度查询</button>
				<button data-loading-text="提交中" id="alertBtn" type="button" class="mui-btn mui-btn-primary twoBtn">提交</button>
			</div>
			<script src="js/mui.min.js"></script>
			<script src="js/mui.picker.min.js"></script>
			<script src="js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
			<script src="js/city.data.js" type="text/javascript" charset="utf-8"></script>
			<script src="js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
			<script type="text/JavaScript">

			</script>
			<script>
				//页面跳转
				mui(".mui-content-padded").on("tap", ".orderBtn", function() {
					mui.openWindow({
						url: 'order.html',
						id: 'order.html'
					});
				});
				//下拉框选择改变事件
				function btnChange(values) {
					//如果选中的是报修，显示故障类型
					if(values == "2") {
						document.getElementById('tab').style.display = 'block';
					} else {
						document.getElementById('tab').style.display = 'none';
					}
				}
				//区域滚动
				mui('.mui-scroll-wrapper').scroll({
					deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
				});
				(function($) {
					$.init();
					var result = $('.result')[0];
					var btns = $('.btn');
					btns.each(function(i, btn) {
						btn.addEventListener('tap', function() {
							var optionsJson = this.getAttribute('data-options') || '{}';
							var options = JSON.parse(optionsJson);
							var id = this.getAttribute('id');
							/*
							 * 首次显示时实例化组件
							 * 示例为了简洁，将 options 放在了按钮的 dom 上
							 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
							 */
							var picker = new $.DtPicker(options);
							picker.show(function(rs) {
								/*
								 * rs.value 拼合后的 value
								 * rs.text 拼合后的 text
								 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
								 * rs.m 月，用法同年
								 * rs.d 日，用法同年
								 * rs.h 时，用法同年
								 * rs.i 分（minutes 的第二个字母），用法同年
								 */
								result.innerText = rs.text;
								/* 
								 * 返回 false 可以阻止选择框的关闭
								 * return false;
								 */
								/*
								 * 释放组件资源，释放后将将不能再操作组件
								 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
								 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
								 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
								 */
								picker.dispose();
							});
						}, false);
					});
				})(mui);
			</script>
			<script>
				(function($, doc) {
					$.init();
					$.ready(function() {

						//-----------------------------------------
						//3级联示例
						var cityPicker3 = new $.PopPicker({
							layer: 3
						});
						cityPicker3.setData(cityData3);
						var showCityPickerButton = doc.getElementById('showCityPicker3');
						var cityResult3 = doc.getElementById('cityResult');
						showCityPickerButton.addEventListener('tap', function(event) {
							cityPicker3.show(function(items) {
								cityResult3.innerText = (items[0] || {}).text + " " + (items[1] || {}).text + " " + (items[2] || {}).text;
								//返回 false 可以阻止选择框的关闭
								//return false;
							});
						}, false);
					});
				})(mui, document);
			</script>
			<script>
				mui(document.body).on('tap', '.mui-btn-primary', function(e) {
					mui(this).button('loading');
					setTimeout(function() {
						mui(this).button('reset');
						mui.alert('我们会第一时间为您安排工作人员上门服务', '预约成功');
					}.bind(this), 2000);
					
				});

			</script>
	</body>

</html>